<template>
    <div class="addGoods_container">
      <div class="header">
        <!--面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/goods' }">商品列表</el-breadcrumb-item>
          <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-card>
        <el-alert title="添加商品信息" type="info" show-icon center closable></el-alert>
        <!--步骤条-->
        <el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="商品信息"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <!--添加商品表单-->
        <el-form :model="addGoodsForm" :rules="addGoodsFormRules" ref="addGoodsFormRef" label-width="100px">
          <!--靠左边的标签页-->
          <el-tabs v-model="activeIndex" :tab-position="'left'" @tab-click="tabClicked" :before-leave="beforeTabLeave">
            <el-tab-pane class="formItem" label="基本信息" name="0">
              <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="addGoodsForm.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="goods_price">
                <el-input type="number" v-model="addGoodsForm.goods_price"></el-input>
              </el-form-item>
              <el-form-item label="商品重量" prop="goods_weight">
                <el-input type="number" v-model="addGoodsForm.goods_weight"></el-input>
              </el-form-item>
              <el-form-item label="商品数量" prop="goods_number">
                <el-input type="number" v-model="addGoodsForm.goods_number"></el-input>
              </el-form-item>
              <el-form-item label="商品分类" prop="goods_cat">
                <!--级联选择框-->
                <el-cascader v-model="addGoodsForm.goods_cat" :options="cateList" :props="cateProps" @change="cascaderChange"></el-cascader>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="1">
              <!--渲染表单的itemx项-->
              <el-form-item v-for="item in manyTableData" :label="item.attr_name" :key="item.attr_id">
                <!--复选框组-->
                <el-checkbox-group v-model="item.attr_vals">
                  <el-checkbox v-for="(cb,i) in item.attr_vals" :label="cb" :key="i" border></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <h1 v-if="!manyTableData.length">无数据</h1>
            </el-tab-pane>
            <el-tab-pane class="formItem" label="商品属性" name="2">
              <!--渲染表单的itemx项-->
              <el-form-item v-for="item in onlyTableData" :label="item.attr_name" :key="item.attr_id" label-width="150px">
                <!--复选框组-->
                <el-input v-model="item.attr_vals"></el-input>
              </el-form-item>
              <h1 v-if="!onlyTableData.length">无数据</h1>
            </el-tab-pane>
            <el-tab-pane class="textAilgnLeft" label="商品图片" name="3">
              <!--图片上传插件-->
              <el-upload :action="uploadUrl" :headers="uploadHeaders" :on-preview="handlePreview" :on-remove="handleRemove"
                         :on-success='uploadScccess' list-type="picture">
                <el-button size="small" type="primary">点击上传图片</el-button>
              </el-upload>
              <!--图片预览-->
              <el-dialog :visible.sync="previewVisible" width="85%">
                <img :src="previewPath" style="width: 100%">
              </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="商品内容" name="4">
              <!--富文本编辑器-->
              <quill-editor v-model="addGoodsForm.goods_introduce">

              </quill-editor>
              <el-row :gutter="0" class="addGoodsRow">
                <el-col :span="5"><div class="grid-content bg-purple">
                  <el-button type="primary" @click="addGoods">添加商品</el-button>
                </div></el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-card>
    </div>
</template>

<script>
  import connector from '../../base/interface.js';
    export default {
      name: "add",
      data(){
          return{
            /*商品分类列表*/
            cateList:[],
            /*级联选择框配置对象*/
            cateProps:{label:'cat_name', value:'cat_id', children:'children', expandTrigger:'hover', emitPath:true},
            /*当前完成的项,联动标签页选中的面板*/
            activeIndex:'0',
            /*添加商品的表单数据对象*/
            addGoodsForm:{goods_name:'',goods_cat:[],goods_price:0,goods_number:0,goods_weight:0,goods_introduce:'',pics:[],attrs:[]},
            /*表单验证规则对象*/
            addGoodsFormRules:{
              goods_name:[{required:true,message:'请输入商品名称', trigger: 'blur'}],
              goods_price:[{required:true,message:'请输入商品价格', trigger: 'blur'}],
              goods_weight:[{required:true,message:'请输入商品重量', trigger: 'blur'}],
              goods_number:[{required:true,message:'请输入商品数量', trigger: 'blur'}],
              goods_cat:[{required:true,message:'请选择商品分类', trigger: 'blur'}],
            },
            /*动态参数数据*/
            manyTableData:[],
            /*静态属性数据*/
            onlyTableData:[],
            /*上传图片的跟路径*/
            uploadUrl:'',
            /*图片上传时的请求头*/
            uploadHeaders:{},
            /*图片预览对话框是否显示*/
            previewVisible:false,
            /*图片预览的地址*/
            previewPath:''
          }
      },
      methods:{
        getCateList(){
          /*获取所有的商品分类列表*/
          connector.getCateList().then(res=>{
            var {data:data}=res;
            this.cateList=data.data;
          });
        },
        cascaderChange(){
          /*级联选择框值改变, 设置只允许选择第三级分类*/
          if(this.addGoodsForm.goods_cat.length <=2){
            this.addGoodsForm.goods_cat.length=[];
            /*清空表格数据*/
            return;
          }
        },
        beforeTabLeave(activeName,oldActiveName){
          /*标签页切换前钩子函数*/
          if(activeName=='0')return true;
          if(this.addGoodsForm.goods_cat.length<=2){
            this.$message.error('请先选择商品分类!');
            return false;
          }
          return true;
        },
        tabClicked(){
          //标识获取的是动态参还是静态属性
          var manyOrOnly=this.activeIndex == 1?'many':'only';
          if(this.activeIndex ==1 || this.activeIndex ==2){
          //  获取商铺参数 或者商品属性
            connector.getCategories(this.getCatId,manyOrOnly).then(res=>{
              var {data:data}=res;
              if(manyOrOnly=='many'){
              // attr_vals 字段安空格分割为数组
                data.data.forEach(item=>{
                  item.attr_vals=item.attr_vals?item.attr_vals.trim().split(/\s+/):[];
                });
                this.manyTableData=data.data;
              }else{
                this.onlyTableData=data.data;
              }
            });
          }else if (0){

          }
        },
        handlePreview(file){
          /*处理图片预览效果*/
          this.previewPath=file.response.data.url;
          this.previewVisible=true;
        },
        handleRemove(file){
          /*处理移除图片的操作*/
          /*从表单中将图片移除*/
          var filePath=file.response.data.tmp_path;
          const index=this.addGoodsForm.pics.findIndex(item=>item.pic==filePath);
          this.addGoodsForm.pics.splice(index,1);
        },
        uploadScccess(response){
          /*图片上传成功处理函数*/
          this.addGoodsForm.pics.push({pic:response.data.tmp_path});
        },
        addGoods(){
          /*添加商品*/
          this.$refs.addGoodsFormRef.validate(vaild=>{
            if(!vaild){
              this.$message.error('请填写必要的表单项!');
              return;
            }
          //执行添加的业务
            let newGoodsForm=JSON.parse( JSON.stringify(this.addGoodsForm));
            newGoodsForm.goods_cat=newGoodsForm.goods_cat.toString();
            //处理动态参数和静态属性
            this.manyTableData.forEach(item=>{
              var values=item.attr_vals.join(' ');
              newGoodsForm.attrs.push({attr_id:item.attr_id,attr_value:values});
            });
            this.onlyTableData.forEach(item=>{
              newGoodsForm.attrs.push({attr_id:item.attr_id,attr_value:item.attr_vals});
            });
            connector.addGoods(newGoodsForm).then(res=>{
              var {data:data}=res;
              this.$message({message:data.meta.msg,type:'success'});
              this.$refs.addGoodsFormRef.resetFields();
              this.$router.push('/goods');
            });
          });

        }
      },
      created() {
        this.getCateList();
        this.uploadUrl=connector.uploadUrl+'upload';
        /*文件上传时的请求头*/
        this.uploadHeaders=connector.uploadHeaders;
      },computed:{
        getCatId(){
          /*获取选中的分类id*/
          return this.addGoodsForm.goods_cat[this.addGoodsForm.goods_cat.length-1];
        }
      }
    }
</script>

<style lang="scss" scoped>
.addGoods_container{
  .el-steps{
    margin: 20px 0;
  }
  .formItem .el-form-item{
    width: 60%;
  }
  .el-checkbox-group{
    text-align: left;
    .el-checkbox{
      margin: 0 5px;
    }
  }
  .el-upload{
    text-align: left;
  }
  .textAilgnLeft{
    text-align: left;
  }
  .addGoodsRow{
    text-align: left;
    margin: 15px 0;
  }
}

</style>
<style>
  .el-step.is-horizontal{
    text-align: left;
  }
  .el-form-item__content{
    text-align: left;
  }
  /*富文本编辑器编辑区最小高度*/
  .ql-editor{
    min-height: 200px;
  }
</style>
